<template>
  <div id="app">
      <header>
        <div class="container">
          <div class="row">
            <div class="col-md-12">
              <div class="colorlib-navbar-brand">
                <a class="colorlib-logo" href="/">Bato</a>
              </div>
              <div class="col-md-4"></div>
              <div class="col-md-6" id="nav">
                <ul>
                  <li class="active" v-for="(item, index) in mommon" :key="index">
                    <a :href="/#/+item.n_link">{{item.n_name}}</a>
                  </li>
                  
                </ul>
              </div>
              <div class="col-md-12" id="enter">
               <img src="./assets/images/about.jpg" alt="">
               <a v-for="(item, index) in contact" :key="index" :href="/#/+item.n_link">{{item.n_name}}</a>
              
              </div>
            </div>
          </div>
        </div>
      </header>
    <router-view />
  </div>
</template>


<script>
import {mommon} from './api/index.js';
export default {
      name: 'mommon',
      data () {
        return { //存储请求到的导航数据
          mommon:[],
          contact:[],
        }
      },
      methods:{
        async getmommon(){ //async异步请求
          //使用api/index.js里面的mommon方法
          var result=await mommon();
          // console.log(result);
          //将请求到的结果赋值到当前data的mommon内
          this.mommon=result['message']['nav'];
          this.contact=result['message']['contact'];
        },
      },
      mounted(){  //自动调用方法
      this.getmommon();
      }
    }	
</script>
<style src="./assets/css/style.css"></style>
<style>

</style>

